<nz-card>
    <div class="common-search-wrap">
        <div class="common-search-forms">
            <div class="common-form-item">
                <label class="common-search-label">入库单号</label>
                <div class="common-search-conrol">
                    <input
                        type="text"
                        nz-input
                        placeholder="请输入"
                        [(ngModel)]="queryForm.warehousingNumber"
                    />
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">关联单号</label>
                <div class="common-search-conrol">
                    <input
                        type="text"
                        nz-input
                        placeholder="请输入"
                        [(ngModel)]="queryForm.purchaseNumber"
                    />
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">包含商品</label>
                <div class="common-search-conrol">
                    <input
                        type="text"
                        nz-input
                        placeholder="69码商品编码或名称"
                        [(ngModel)]="queryForm.whGood"
                    />
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">新建日期</label>
                <div class="common-search-conrol">
                    <nz-range-picker [nzFormat]="'yyyy-MM-dd'" [(ngModel)]="queryForm.dateFormat"></nz-range-picker>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">状态</label>
                <div class="common-search-conrol">
                    <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择" [(ngModel)]="queryForm.state">
                        <nz-option nzLabel="全部" nzValue=""></nz-option>
                        <nz-option nzLabel="草稿" nzValue="0"></nz-option>
                        <nz-option nzLabel="已通知" nzValue="2"></nz-option>
                        <nz-option nzLabel="已完成" nzValue="3"></nz-option>
                        <nz-option nzLabel="已关闭" nzValue="4"></nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">类型</label>
                <div class="common-search-conrol">
                    <nz-select
                        nzShowSearch
                        nzAllowClear
                        nzMode="multiple"
                        [nzMaxTagCount]="1"
                        nzPlaceHolder="请选择"
                        [(ngModel)]="typeSelected"
                        (ngModelChange)="typeChange($event)">
                        <nz-option
                            *ngFor="let item of warehousingTypeLists"
                            [nzLabel]="item.name"
                            [nzValue]="item.content">
                        </nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item">
                <div class="common-search-conrol">
                    <button nz-button nzType="primary" class="m-r-8" (click)="query()">查询</button>
                    <button nz-button nzType="default" (click)="resetQuery()">重置</button>
                    <button nz-button nzType="link" (click)="isCollapse = !isCollapse">
                        {{ isCollapse ? '收起' : '展开' }}<i nz-icon [nzType]="isCollapse ? 'up' : 'down'" nzTheme="outline"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</nz-card>

<nz-card class="m-t-2">
    <div class="oprea-wrap p-b-15">
        <button nz-button nzType="primary" class="m-r-8" [routerLink]="['../putSave', 0]" *ngIf="permission.userPermission.has('stock:put:add')">新建采购入库</button>
        <button nz-button nzType="primary" class="m-r-8" [routerLink]="['/stock/PutDirectWarehousing', 0]" *ngIf="permission.userPermission.has('stock:put:addDirect')" [queryParams]="{entrance: 'save'}">新建直接入库</button>
        <!-- <button nz-button nzType="primary" [nzLoading]="isLoadingSync" (click)="consynchroData()">同步</button> -->
    </div>

    <div class="pagination-wrap-position table-wrap">
        <nz-table
            #basicTable
            nzSize="small"
            nzShowSizeChanger
            nzShowQuickJumper
            nzOuterBordered
            [nzScroll]="{ x: '1100px' }"
            [nzFrontPagination]="false"
            [nzLoadingDelay]="100"
            [nzLoading]="tableLoading"
            [nzData]="listOfData?.records"
            [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
            [nzTotal]="listOfData?.total"
            [nzPageIndex]="listOfData?.current"
            [nzPageSize]="listOfData?.size"
            [nzShowTotal]="totalTemplate"
            (nzPageIndexChange)="onPageIndexChange($event)"
            (nzPageSizeChange)="onPageSizeChange($event)">
            <thead>
                <tr>
                    <th nzAlign="center" nzWidth="180px" nzLeft>入库单号</th>
                    <th nzAlign="center" nzWidth="120px">状态</th>
                    <th nzAlign="center" nzWidth="200px">关联单号</th>
                    <th nzAlign="center" nzWidth="150px">申请人</th>
                    <th nzAlign="center" nzWidth="160px">新建时间</th>
                    <th nzAlign="center" nzWidth="150px">入库内容</th>
                    <th nzAlign="center" nzWidth="150px">已入库</th>
                    <th nzAlign="center" nzWidth="160px">完成/关闭时间</th>
                    <th nzAlign="center" nzWidth="150px">入库类型</th>
                    <th nzAlign="center" nzWidth="200px">备注</th>
                    <th nzAlign="center" nzWidth="300px" nzRight>操作</th>
                </tr>
            </thead>
    
            <tbody>
                <tr *ngFor="let data of basicTable.data; let index = index;">
                    <!-- 入库单号 -->
                    <td nzAlign="center" nzLeft>
                        <a nz-button nz-button-tdlink nzType="link" [routerLink]="['../putDetails', data.id]">
                            {{ data.warehousingNumber }}
                        </a>
                    </td>
                    <!-- 状态 -->
                    <td
                        nzAlign="center"
                        [class]="'font-' + data.state"
                        [ngStyle]="{'background': data.state === 2 ? 'rgb(255 153 0 / 30%)' : '#ffffff'}">
                        {{ data.stateText }}
                    </td>
                    <!-- 关联单号 -->
                    <td nzAlign="center">{{ data.purchaseNumber ? data.purchaseNumber : '---' }}</td>
                    <!-- 申请人 -->
                    <td nzAlign="center">{{ data.founder ? data.founder : '---' }}</td>
                    <!-- 新建时间 -->
                    <td nzAlign="center">{{ data.createTime }}</td>
                    <!-- 入库内容 -->
                    <td nzAlign="center">{{ data.purchaseContent ? data.purchaseContent : '---' }}</td>
                    <!-- 已入库 -->
                    <td nzAlign="center">{{ data.storedContent ? data.storedContent : '---' }}</td>
                    <!-- 完成/关闭时间 -->
                    <td nzAlign="center">{{ data.endTime ? data.endTime : '---' }}</td>
                    <!-- 入库类型 -->
                    <td nzAlign="center">{{ type_To_text(data.type) }}</td>
                    <!-- 备注 -->
                    <td nzAlign="center">{{ data.remark ? data.remark : '---' }}</td>
                    <!-- 操作 -->
                    <td nzAlign="center" nzRight>
                        <button
                            *ngIf="permission.userPermission.has('stock:put:view')"
                            nz-button
                            nzType="link"
                            [routerLink]="['../putDetails', data.id]">
                            查看
                        </button>
                        <button
                            *ngIf="permission.userPermission.has('stock:put:edit')"
                            nz-button
                            nzType="link"
                            [disabled]="data.state != 0 || data.type == 2 || data.type == 5"
                            [routerLink]="[data.type == 1 ? '../putSave' : '/stock/PutDirectWarehousing' , data.id]"
                            [queryParams]="{type:data.type, entrance: data.type != 1 ? 'edit' : ''}">
                            编辑
                        </button>
                        <button
                            *ngIf="data.state != 2&&permission.userPermission.has('stock:put:notify')"
                            nz-popconfirm
                            nzPopconfirmTitle="确认通知第三方进行入库操作？"
                            (nzOnConfirm)="synchronize(data.id)"
                            nz-button
                            nzType="link"
                            [disabled]="data.state != 0">
                            通知入库
                        </button>
                        <button
                            *ngIf="data.state == 2&&permission.userPermission.has('stock:put:revocation')"
                            nz-popconfirm
                            nzPopconfirmTitle="确认撤回并且关闭该单？"
                            (nzOnConfirm)="onRecallAndClose(data)"
                            nz-button
                            nzType="link">
                            撤回并关闭
                        </button>
                        <a
                            *ngIf="permission.userPermission.has('stock:put:delete')"
                            nz-button
                            nzType="link"
                            nzDanger
                            nz-popconfirm
                            nzPopconfirmTitle="确认删除吗?"
                            [nzIcon]="iconTpl"
                            (nzOnConfirm)="confirm(data.id)"
                            [disabled]="data.state != 0">
                            删除
                        </a>
                        <ng-template #iconTpl>
                            <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                        </ng-template>
                        <!-- 同步 -->
                        <button
                            nz-button
                            nzType="link"
                            [disabled]="data.state == 0 || data.state == 4"
                            (click)="consynchroData(data.warehousingNumber)">
                            同步
                        </button>
                    </td>
                </tr>
            </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
    </div>
</nz-card>
